<template>
    <div class="register"  :style="{minHeight:h+'px'}">
		<vue-particles color="#ccc"></vue-particles>
		<div class="con">
			<div class="top-logo2 css1aa289159515f37">重置密码</div>
			<div class="center">
				<el-form ref="form" @submit.native.prevent :model="form" label-width="120px">

					<el-form-item label="店铺名称：">
						<el-input v-model="form.name" @input = "getshoujihao"></el-input>
					</el-form-item>
          <el-form-item  label="联系电话：">
          	<el-input v-model="dianhua" disabled></el-input>

          </el-form-item>
          <el-form-item label="验证码：" class="code">
          	<el-input v-model="form.code"></el-input>
            <el-button style="padding: 9px 30px;" type="danger" @click="getcode" :disabled="jinyong" size="mini">{{tishi}}</el-button>
          </el-form-item>
					<el-form-item label="设置密码：" >
						<el-input v-model="form.pass" show-password></el-input>
					</el-form-item>
					<el-form-item label="再次输入：" >
						<el-input v-model="form.pass2" show-password></el-input>
					</el-form-item>
					 <el-form-item label="" class="resan">
					 	 <el-button type="danger" @click="register">重置密码</el-button>
					 </el-form-item>
					<div class="gologin">已有账号？<router-link to="/login">登陆</router-link></div>
				</el-form>
			</div>
		</div>
    </div>
</template>

<script>
	import axios from 'axios'
	export default {
			data() {
				return {
					form: {
						name: '',
						pass: '',
						pass2: '',
						user: '',
						phone: '',
						code: ''
					},
					checked:false,
					count: 60,
					tishi:"获取验证码",
					jinyong:false,
					shopid:"",
                    h:""
				}
			},
      computed:{
          dianhua:function(){
            if(this.form.phone != null){
              let x = this.form.phone.toString()
              let s = x.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
              console.log(s)
              return s
            }else{
              return ''
            }

          }

      },
			created() {
				//左边导航高度
				var h = document.documentElement.clientHeight;
				this.h = h;

				//传进来的supplier_id
				if(this.$route.query.supplier_id){
					this.shopid = this.$route.query.supplier_id
				}

				var that = this
				document.onkeydown = function(e){
					var ev = document.all ? window.event : e;
					if(ev.keyCode==13) {
						that.register()
					}
				}
			},
			methods: {
        getshoujihao:function(){
          axios.get('/api/plan-market/shop/mobile?name='+this.form.name)
          	.then(response => {
          		if(response.data.msg.code == 0){
          			this.form.phone = response.data.data
          		}else{
          			// this.$message.error(response.data.msg.info);
          		}
          	})
        },
				rulesee:function(){
					window.open(window.location.origin +  window.location.pathname+"#/rule")
        },
				//获取验证码
				getcode:function(){
					if(this.form.phone == ""){
						this.$message.error('请先输入手机号');
					}else{
						var that = this;
						var params = new URLSearchParams();
						params.append('mobile', this.form.phone);
            params.append('name', this.form.name);
						axios.post('/api/auth/sms_code/v2', params)
							.then(response => {
								if(response.data.msg.code == 0){
									this.$message({
										message: '验证码已发送！',
										type: 'success'
									});
									that.daojishi()
								}else{
									this.$message.error(response.data.msg.info);
								}
							})
					}
				},
				//注册
				register:function(){
					if(this.form.pass != this.form.pass2){
						this.$message.error('两次输入的密码不同，重新输入。');
						return false
					}
					if(this.form.code == ""){
						this.$message.error('请输入验证码。');
						return false
					}

					var that = this;
					var params = new URLSearchParams();
					params.append('name', this.form.name);
					params.append('password', this.form.pass);
					params.append('mobile', this.form.phone);
					params.append('sms_code', this.form.code);

					//注册
					axios.post('/api/auth/sms_reset_password', params)
						.then(response => {
							if(response.data.msg.code == 0){
								this.$message({
									message: '密码重置成功！',
									type: 'success'
								});

								that.$router.push({
									path: '/login'
								})
							}else{
								this.$message.error(response.data.msg.info);
								this.count = 0
							}
						})
				},
				//倒计时功能
				daojishi:function(){
					var interval;
					interval = window.setInterval(() => {
						if(this.count <= 0){
							window.clearInterval(interval)
							this.tishi = "获取验证码",
							this.jinyong = false
							this.count = 60
						}else{
							this.count -= 1;
							this.tishi = this.count+"秒重新获取"
							this.jinyong = true
						}
					}, 1000);
				}
			}
	}
</script>

<style lang="scss" scoped>
	.register{
		display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;  background: url('https://file.storep.91haoka.cn/gantanhao/bj.png');
		#particles-js{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9}
		.con{
			width: 700px; margin: 0 auto; z-index: 10;
            .el-input__inner{ line-height: 36px; height: 36px;}
            .el-button--danger{ padding: 10px 30px; line-height: 14px;}
            .rulesee{ color: #2673F9; cursor: pointer;}
			.top-logo2{ font-size: 30px; color: #EEF7FF; margin-bottom: 20px;}
			.center{
				background: #FFFFFF; box-shadow: 0px 0px 5px #EEF7FF; border-radius: 5px; min-width: 700px;
				.title{ text-align: center; padding: 20px; color: #EEF7FF; font-size: 20px;}
				.el-form{
					width: 400px; margin: 0 auto; font-size: 14px; padding: 40px 0;
					.code{
						position: relative;
						.el-button{ position: absolute; right: 0px; top: 3px;}
					}
					.resan{
						.el-button{ width: 280px; margin-left: -60px;}
					}
					.gologin{
						text-align: center; margin-top: 20px;
						a{ color: #2673F9}
					}
				}
			}
		}
	}
</style>
